<template>
  <div class="addTags">
    <el-button type="primary" class="addBtn" @click="addTags()">新增</el-button>
    <BiTable
      :loading="loading"
      :data="tableData"
      size="medium"
      class="table"
      :column="tableColums"
      pagination
      layout="total, prev, pager, next"
      :total="page_info.total"
      :page.sync="page_info.page"
      :limit.sync="page_info.page_size"
      @pagination="handlePageChange"
    >
      <template v-slot:name="scope">
        <div v-if="!scope.row.is_input">
          <span>{{ scope.row.name }}</span>
        </div>
        <div v-else>
          <!--  @change="changeSaveTag(scope)" -->
          <el-input v-model="scope.row.name" maxlength="6" style="width:200px" />
        </div>
      </template>
      <template v-slot:zip="scope">
        <el-button v-if="!scope.row.is_input" size="medium" type="text" @click="editTag(scope)">编辑</el-button>
        <el-button v-else size="medium" type="text" @click.stop="saveTag(scope)">保存</el-button>
        <!-- <el-popconfirm
          icon="el-icon-info"
          icon-color="red"
          style="margin-left:10px;"
          title="确定删除吗？"
          @confirm="delRow(row)"
        >
          <el-button
            slot="reference"
            type="text"
            size="medium"
          >删除</el-button>
        </el-popconfirm> -->
      </template>
    </BiTable>
  </div>
</template>
<script>
import { tagSave, tagList } from '@/api/content'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      loading: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      tableData: [],
      tableColums: [
        {
          label: '短剧标签',
          prop: 'name',
          slotScope: true
        },
        {
          label: '操作',
          prop: 'zip',
          width: 100,
          slotScope: true
        }
      ]
    }
  },
  mounted() {
    this.seatchTable()
  },
  methods: {
    ...mapMutations('common', ['resize_commonDataList']),
    seatchTable() {
      tagList({ type: 'tag', ...this.page_info }).then(res => {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      })
    },
    editTag(scope) {
      this.$set(this.tableData[scope.$index], 'is_input', true)
    },
    saveTag(scope) {
      if (scope.row.name === '') {
        this.$message.warning('请输入标签名')
        return false
      }
      // 重置数据
      this.resize_commonDataList({ type: 'tag' })
      this.tableData[scope.$index].is_input = false
      this.tagSave(scope.row)
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.seatchTable()
    },
    async tagSave(row) {
      let data = {}
      if (row.id) {
        data = { id: row.id || '', name: row.name }
      } else {
        data = { name: row.name }
      }
      const res = await tagSave(data)
      this.$emit('ok')
      if (res.status_code === 1) {
        this.$message.success(res.msg)
      }
    },
    addTags() {
      this.tableData.unshift({ name: '', id: '', is_input: true })
    },
    delRow(scope) {

    }
  }
}
</script>
<style lang="scss" scoped>
  .addTags{
    width: 600px;
    height: auto;
    padding: 20px;
    .table{
      width: 100%;
      height: auto;
    }
    .addBtn{
      float: right;
      margin-bottom: 20px;
    }
  }
</style>
